<template>
  <div class="max">
    <div class="max_left">
      <a-form-model ref="ruleForm"
                    :model="form"
                    :rules="rules"
                    :label-col="labelCol"
                    :wrapper-col="wrapperCol">
        <!-- 企业信息 -->
        <div class="maxleftbox"
             id="top">
          <div class="maxleft_title">企业信息</div>
          <div class="maxleft_title1">
            <div class="photos">
              <div class="photos1">
                <div class="avatars"><img src="../../../assets/image/enter/gb.png"
                                          alt=""
                                          @click="delImage('doorPicId')"
                                          v-show="form.doorPicId"></div>
                <div class="upload-image-contain"
                     @click="$imagePreview(previewUrl + form.doorPicId)"
                     v-if="form.doorPicId">
                  <img class="uppload-image"
                       :src="previewUrl + form.doorPicId"
                       alt="文件丢失，请重新上传"/>
                </div>
                <a-upload name="file"
                          list-type="picture-card"
                          class="avatar-uploader"
                          :show-upload-list="false"
                          v-else
                          :action="uploadUrl"
                          :before-upload="beforeUpload"
                          @change="headerImageChange">
                  <div>
                    <img src="../../../assets/image/enter/bf.png"
                         alt="">
                  </div>
                </a-upload>
                <p>门头照片</p>
              </div>
              <div class="photos2">
                <div class="photo2-main">
                  <div class="photos2left">
                    <div class="avatars"><img src="../../../assets/image/enter/gb.png"
                                              alt=""
                                              v-show="form.workshopPicId[0]"
                                              @click="delWorkshopPic(0)"></div>
                    <div class="upload-image-contain"
                         @click="$imagePreview(previewUrl + form.workshopPicId[0])"
                         v-if="form.workshopPicId[0]">
                      <img class="uppload-image"
                           :src="previewUrl + form.workshopPicId[0]"
                           alt="文件丢失，请重新上传"/>
                    </div>
                    <a-upload name="file"
                              list-type="picture-card"
                              class="avatar-uploader"
                              v-else
                              :show-upload-list="false"
                              :action="uploadUrl"
                              :before-upload="beforeUpload"
                              @change="firstWorkshopPic">
                      <div>
                        <img src="../../../assets/image/enter/bf.png"
                             alt="">
                      </div>
                    </a-upload>
                  </div>
                  <div class="photos2right">
                    <div class="avatars"><img src="../../../assets/image/enter/gb.png"
                                              alt=""
                                              v-show="form.workshopPicId[1]"
                                              @click="delWorkshopPic(1)"></div>
                    <div class="upload-image-contain"
                         @click="$imagePreview(previewUrl + form.workshopPicId[1])"
                         v-if="form.workshopPicId[1]">
                      <img class="uppload-image"
                           :src="previewUrl + form.workshopPicId[1]"
                           alt="文件丢失，请重新上传"/>
                    </div>
                    <a-upload name="file"
                              list-type="picture-card"
                              class="avatar-uploader"
                              :show-upload-list="false"
                              v-else
                              :action="uploadUrl"
                              :before-upload="beforeUpload"
                              @change="secondWorkshopPic">
                      <div>
                        <img src="../../../assets/image/enter/bf.png"
                             alt="">
                      </div>
                    </a-upload>
                  </div>
                </div>
                <p>工作间照片 <i>（两张不同视角）</i></p>
              </div>
              <div class="photos3">
                <div class="avatars"><img src="../../../assets/image/enter/gb.png"
                                          alt=""
                                          v-show="form.businessLicensePicId"
                                          @click="delImage('businessLicensePicId')"></div>
                <div class="upload-image-contain"
                     @click="$imagePreview(previewUrl + form.businessLicensePicId)"
                     v-if="form.businessLicensePicId">
                  <img class="uppload-image"
                       :src="previewUrl + form.businessLicensePicId"
                       alt="文件丢失，请重新上传"/>
                </div>
                <a-upload name="file"
                          list-type="picture-card"
                          class="avatar-uploader"
                          :show-upload-list="false"
                          v-else
                          :action="uploadUrl"
                          :before-upload="beforeUpload"
                          @change="businessLicensePicChange">
                  <div>
                    <img src="../../../assets/image/enter/bf.png"
                         alt="">
                  </div>
                </a-upload>
                <p>营业执照 <i>（照片/扫描件）</i></p>
              </div>
              <div class="photos4">
                <div class="avatars"><img src="../../../assets/image/enter/gb.png"
                                          alt=""
                                          v-show="form.idCardFrontPicId"
                                          @click="delImage('idCardFrontPicId')"></div>
                <div class="upload-image-contain"
                     @click="$imagePreview(previewUrl + form.idCardFrontPicId)"
                     v-if="form.idCardFrontPicId">
                  <img class="uppload-image"
                       :src="previewUrl + form.idCardFrontPicId"
                       alt="文件丢失，请重新上传"/>
                </div>
                <a-upload name="file"
                          list-type="picture-card"
                          class="avatar-uploader"
                          v-else
                          :show-upload-list="false"
                          :action="uploadUrl"
                          :before-upload="beforeUpload"
                          @change="idCardFrontPicChange">
                  <div>
                    <img src="../../../assets/image/enter/bz.png"
                         alt="">
                  </div>
                </a-upload>
                <p>头像面</p>
              </div>
              <div class="photos5">
                <div class="avatars"><img src="../../../assets/image/enter/gb.png"
                                          alt=""
                                          v-show="form.idCardBackPicId"
                                          @click="delImage('idCardBackPicId')"></div>
                <div class="upload-image-contain"
                     @click="$imagePreview(previewUrl + form.idCardBackPicId)"
                     v-if="form.idCardBackPicId">
                  <img class="uppload-image"
                       :src="previewUrl + form.idCardBackPicId"
                       alt="文件丢失，请重新上传"/>
                </div>
                <a-upload name="file"
                          list-type="picture-card"
                          class="avatar-uploader"
                          :show-upload-list="false"
                          v-else
                          :action="uploadUrl"
                          :before-upload="beforeUpload"
                          @change="idCardBackPicChange">
                  <div>
                    <img src="../../../assets/image/enter/bz2.png"
                         alt="">
                  </div>
                </a-upload>
                <p>国徽面</p>
              </div>
            </div>
          </div>
          <div class="yaoqiu">
            <h4>上传要求</h4>
            <p>1.门头照片要求看到维修厂名称和整体格局</p>
            <p>2.工作间照片需要能看到工位全貌（比如可以看到一排4个工位），需要有一张工位有车的照片</p>
            <p>3.如是证件扫描件，需加盖公章，公章需清晰，可看到公司全称；证件原件拍照，需清晰、平整</p>
            <p>4.认证需要人工审核，您可以收到审核信息</p>
            <p>5.您提交的所有资料将被加上水印，仅作迅车通认证使用。</p>
            <h4 class="yaoqiuh4">请核对一下信息是否正确：<i>(根据上传图片自动识别，如有错误请手动修改)</i></h4>
            <!-- 表单 -->
            <a-row>
              <a-col :span="12">
                <a-form-model-item label="公司名称"
                                   prop="tenantName">
                  <a-input v-model="form.tenantName"
                           placeholder="请输入营业执照上的公司全称"/>
                </a-form-model-item>
              </a-col>
              <a-col :span="12">
                <a-form-model-item label="公司简称"
                                   prop="shortName">
                  <a-input v-model="form.shortName"
                           placeholder="请输入公司简称"/>
                </a-form-model-item>
              </a-col>
            </a-row>
            <a-row>
              <a-col :span="12">
                <a-form-model-item label="统一社会信用代码"
                                   prop="creditCode">
                  <a-input v-model="form.creditCode"
                           placeholder="请输入统一社会信用代码"/>
                </a-form-model-item>
              </a-col>
              <a-col :span="12">
                <a-form-model-item label="法人代表"
                                   prop="legalPerson">
                  <a-input v-model="form.legalPerson"
                           placeholder="请输入法人代表"/>
                </a-form-model-item>
              </a-col>
            </a-row>
            <a-row>
              <a-col :span="12">
                <a-form-model-item label="法人代表身份证"
                                   prop="legalPersonIdCard">
                  <a-input v-model="form.legalPersonIdCard"
                           placeholder="请输入法人代表身份证"/>
                </a-form-model-item>
              </a-col>
              <a-col :span="12"
                     class="box11">
                <a-form-model-item label="联系人"
                                   prop="contact">
                  <a-input v-model="form.contact"
                           placeholder="请输入联系人"/>
                </a-form-model-item>
              </a-col>
            </a-row>
            <a-row>
              <a-col :span="12">
                <a-form-model-item label="联系电话"
                                   prop="contact">
                  <a-input v-model="form.mobile"
                           placeholder="请输入联系电话"/>
                </a-form-model-item>
              </a-col>
              <a-col :span="12">
                <a-form-model-item label="所在地区"
                                   style=""
                                   prop="address.optionsA">
                  <a-cascader :options="CityArray1"
                              v-model="form.address.optionsA"
                              :value="form.address.optionsA"
                              :load-data="loadData1"
                              change-on-select
                              @change="onChangeAddress1"
                              placeholder="请选择地址"/>
                </a-form-model-item>
              </a-col>
            </a-row>
            <a-row>
              <a-col :span="12">
                <a-form-model-item label="详细地址"
                                   prop="address.detailAddr">
                  <a-input v-model="form.address.detailAddr"
                           placeholder="请输入门店地址"/>
                </a-form-model-item>
              </a-col>

            </a-row>
            <div></div>
          </div>
        </div>

        <!-- 开票信息 -->
        <div class="writMessage"
             id="bot">
          <div class="maxleft_title">开票信息</div>
          <div class="maxleft_title1">
            <a-row>
              <a-col :span="12"
                     style="font-size:14px;color:#333;"> 发票信息
              </a-col>
            </a-row>
            <a-row>
              <a-col :span="12">
                <a-form-model-item label="发票类型"
                                   prop="invoice.invoiceType">
                  <a-checkbox @change="e => invoiceTypeChange(1)"
                              :checked="form.invoice.invoiceType === '1'">
                    增值税普通发票
                  </a-checkbox>
                  <a-checkbox @change="e => invoiceTypeChange(2)"
                              :checked="form.invoice.invoiceType === '2'">
                    增值税专用发票
                  </a-checkbox>
                </a-form-model-item>
              </a-col>
            </a-row>
            <a-row>
              <a-col :span="12">
                <a-form-model-item label="发票抬头"
                                   prop="invoice.title">
                  <a-input v-model="form.invoice.title"
                           placeholder="请输入发票抬头"/>
                </a-form-model-item>
              </a-col>
              <a-col :span="12">
                <a-form-model-item label="纳税人识别号"
                                   prop="invoice.taxRegNo">
                  <a-input v-model="form.invoice.taxRegNo"
                           placeholder="请输入纳税人识别号"/>
                </a-form-model-item>
              </a-col>
            </a-row>
            <a-row>
              <a-col :span="12"
                     style="font-size:14px;color:#333;"> 发票收件
              </a-col>
            </a-row>
            <a-row>
              <a-col :span="12">
                <a-form-model-item label="收件人"
                                   prop="invoice.accepter">
                  <a-input v-model="form.invoice.accepter"
                           placeholder="请输入收件人姓名"/>
                </a-form-model-item>
              </a-col>
              <a-col :span="12">
                <a-form-model-item label="联系电话"
                                   prop="invoice.acceptMobile">
                  <a-input v-model="form.invoice.acceptMobile"
                           placeholder="请输入联系人电话"/>
                </a-form-model-item>
              </a-col>
            </a-row>
            <a-row>
              <a-col :span="12">
                <!-- <a-form-model-item label="所在区域" prop="invoice.area">
                  <a-input v-model="form.invoice.area" placeholder="请输入所在区域" />
                </a-form-model-item> -->
                <a-form-model-item label="所在地区"
                                   style=""
                                   prop="invoice.optionsA">
                  <a-cascader :options="CityArray"
                              v-model="form.invoice.optionsA"
                              :value="form.invoice.optionsA"
                              :load-data="loadData"
                              change-on-select
                              @change="onChangeAddress"
                              placeholder="请选择地址"/>
                </a-form-model-item>
              </a-col>
              <a-col :span="12">
                <a-form-model-item label="详细地址"
                                   prop="invoice.acceptAddr">
                  <a-input v-model="form.invoice.acceptAddr"
                           placeholder="请输入详细地址"/>
                </a-form-model-item>
              </a-col>
            </a-row>
          </div>
        </div>
      </a-form-model>

      <!-- 底部 -->
      <div class="botton">
        <div class="checkeds">
          <a-checkbox :checked="form.isAgree">
            我已阅读并同意 <a href="">《维修厂入驻迅车通平台协议》、</a> <a href="">《线上支付服务协议》</a>
          </a-checkbox>
        </div>
        <div class="submit-options">
          <div @click="saveInfo">保存离开</div>
          <div @click="submitAndPreview">提交预览</div>
        </div>
      </div>

    </div>
    <div class="max_right">
      <a-anchor :get-container="getContainer">
        <a-anchor-link href="#top"
                       title="企业信息"/>
        <a-anchor-link href="#bot"
                       title="开票信息"/>
      </a-anchor>
    </div>
  </div>
</template>
<script>
  import '@/assets/css/form.less'
  import setting from '@/settings.js'

  export default {
    data() {
      return {
        labelCol: {span: 6},
        wrapperCol: {span: 17},
        //税票省市区列表
        CityArray: [],
        //地址省市区列表
        CityArray1: [],
        //税票选中的详细地址list
        selectAddressArr: [],
        //地址选中的详细地址
        selectAddressArr1: [],
        //税票api地区数据
        apiData: {},
        //api地区数据
        apiData1: {},
        //api默认选中地址
        apiAddress1: {},
        //税票api默认选中地址
        apiAddress: {},
        form: {
          // 企业id
          tenantId: '',
          // 门头照片
          doorPicId: '',
          // 工作间照片
          workshopPicId: ['', ''],
          // 营业执照照片
          businessLicensePicId: '',
          // 身份证正面
          idCardFrontPicId: '',
          // 身份证背面
          idCardBackPicId: '',
          // 公司名称
          tenantName: '',
          // 公司简称
          // shortName: '',
          // 地址信息
          address: {
            //省
            province: "",
            //省编码
            provinceCode: "",
            //市
            city: "",
            //市编码
            cityCode: "",
            //区
            district: "",
            //区编码
            districtCode: "",
            //街道
            street: "",
            //街道编码
            streetCode: "",
            // 详细地址
            acceptAddr: '',
            optionsA: [],
          },
          // 法人代表
          legalPerson: '',
          // 法人代表身份证
          legalPersonIdCard: '',
          // 统一社会信用代码
          creditCode: '',
          // 联系人
          contact: '',
          // 联系电话
          mobile: '',
          // 发票信息
          invoice: {
            // 发票类型
            invoiceType: '1',
            // 发票抬头
            title: '',
            // 纳税人识别号
            taxRegNo: '',
            // 收件人
            accepter: '',
            // 联系电话
            acceptMobile: '',
            // 所在区域、
            area: '',
            //省
            province: "",
            //省编码
            provinceCode: "",
            //市
            city: "",
            //市编码
            cityCode: "",
            //区
            district: "",
            //区编码
            districtCode: "",
            //街道
            street: "",
            //街道编码
            streetCode: "",
            // 详细地址
            acceptAddr: []
          },
          auditStatus: '0',
          isAgree: true
        },
        rules: {
          tenantName: [{required: true, message: '请输入营业执照上的公司全称'}],
          // shortName: [{ required: true, message: '请输入公司简称' }],
          'address.detailAddr': [{required: true, message: '请输入门店详细地址'}],
          'address.optionsA': [{required: true, message: '请选择门店地址城市'}],
          legalPerson: [{required: true, message: '请输入法人代表'}],
          legalPersonIdCard: [{required: true, message: '请输入法人代表身份证'}],
          creditCode: [{required: true, message: '请输入统一社会信用代码'}],
          contact: [{required: true, message: '请输入联系人'}],
          mobile: [{required: true, message: '请输入联系电话'}, {pattern: /^1[3456789]\d{9}$/, message: '请输入正确的手机号'}],
          'invoice.invoiceType': [{required: true, message: '请选择发票类型'}],
          'invoice.title': [{required: true, message: '请输入发票抬头'}],
          'invoice.taxRegNo': [{required: true, message: '请输入纳税人识别号'}],
          'invoice.accepter': [{required: true, message: '请输入收件人'}],
          'invoice.acceptMobile': [{required: true, message: '请输入联系电话'}, {
            pattern: /^1[3456789]\d{9}$/,
            message: '请输入正确的手机号'
          }],
          'invoice.optionsA': [{required: true, message: '请输入所在区域'}],
          'invoice.acceptAddr': [{required: true, message: '请输入详细地址'}],
        },
        // 上传地址
        uploadUrl: setting.uploadUrl,
        // 预览地址
        previewUrl: setting.previewUrl
      }
    },
    activated() {
      this.getDetails();
    },
    methods: {
      getContainer() {
        return document.getElementById('scroll-container')
      },
      // 验证手机号
      checkPhoneNum(value) {
        let myreg = /^1[3|4|5|6|7|8|9][0-9]{1}[0-9]{8}$/;
        return myreg.test(value);
      },
      // 删除图片
      delImage(key) {
        this.$set(this.form, key, '');
      },
      // 删除工作空间的图片
      delWorkshopPic(i) {
        this.$set(this.form.workshopPicId, i, '');
      },
      // 门头照片上传成功
      headerImageChange(val) {
        if (val.file.status === 'done') {
          this.form.doorPicId = val.file.response.result;
        }
      },
      // 第一张工作室照片
      firstWorkshopPic(val) {
        if (val.file.status === 'done') {
          this.$set(this.form.workshopPicId, 0, val.file.response.result);
        }
      },
      // 第二张工作室照片
      secondWorkshopPic(val) {
        if (val.file.status === 'done') {
          this.$set(this.form.workshopPicId, 1, val.file.response.result);
        }
      },
      // 营业执照
      businessLicensePicChange(val) {
        if (val.file.status === 'done') {
          this.form.businessLicensePicId = val.file.response.result;
          // 如果上传成功图片则识别营业执照
          if (this.form.businessLicensePicId) {
            this.$store.dispatch('settleIn/distinguishBusinessLicense', this.form.businessLicensePicId).then(res => {
              this.form.tenantName = res.name;
              this.form.address.detailAddr = res.address;
              this.form.legalPerson = res.operName;
              this.form.creditCode = res.creditCode;
            })
          }
        }
      },
      // 身份证正面照
      idCardFrontPicChange(val) {
        if (val.file.status === 'done') {
          this.form.idCardFrontPicId = val.file.response.result;
          // 如果证件照正面上传成功则识别证件照
          if (this.form.idCardFrontPicId) {
            this.$store.dispatch('settleIn/distinguishIdCard', this.form.idCardFrontPicId).then(res => {
              console.log(res);
              if (!this.form.legalPerson && res.name) this.form.legalPerson = res.name;
              if (!this.form.contact && res.name) this.form.contact = res.name;
              if (res.no) this.form.legalPersonIdCard = res.no;
            })
          }
        }
      },
      // 身份证背面照片
      idCardBackPicChange(val) {
        if (val.file.status === 'done') {
          this.form.idCardBackPicId = val.file.response.result;
        }
      },
      beforeUpload(file) {
        const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
        if (!isJpgOrPng) {
          this.$message.error('请上传JPG或者PNG格式的图片');
        }
        // const isLt2M = file.size / 1024 / 1024 < 2;
        // if (!isLt2M) {
        //   this.$message.error('请上传2M以内的图片!');
        // } && isLt2M
        return isJpgOrPng;
      },
      // 开票类型修改
      invoiceTypeChange(type) {
        this.form.invoice.invoiceType = type;
      },
      onChange(e) {
        console.log(e.target);
        if (this.changeB) {
          this.changeB = false
        }
        this.changeA = e.target.checked
      },
      onChange1(e) {
        if (this.changeA) {
          this.changeA = false
        }
        this.changeB = e.target.checked
      },
      //获取省市区 如果存的没有就走接口获取再存起来 如果有就直接拿存的赋值
      getCity(fn) {
        console.log('a2')
        this.$store.dispatch("unSave/getAreaListSync", {}).then((result) => {
          for (let i = 0; i < result.length; i++) {
            result[i].isLeaf = false;
            result[i].label = result[i].name;
            result[i].value = result[i].code;
            delete result[i].children;
            this.$set(result[i], 'isChecked', false);
          }
          this.CityArray = result;
          this.CityArray1 = result
          if (fn) fn();
        });
      },
      loadData(selectedOptions) {
        this.selectAddressArr = selectedOptions;
        const targetOption = selectedOptions[selectedOptions.length - 1];
        if (targetOption.level !== "street") {
          targetOption.loading = true;
          console.log(targetOption.code, targetOption.level, 'a3')
          this.$store
            .dispatch("unSave/getAreaListSync", {
              code: targetOption.code,
              level: targetOption.level,
            })
            .then((res) => {
              let result = res;
              for (var i = 0; i < result.length; i++) {
                result[i].isLeaf = result[i].level === "street";
                result[i].label = result[i].name;
                result[i].value = result[i].code;
                delete result[i].children;
              }
              console.log(result);
              targetOption.children = result;
              if (result.length === 0) {
                targetOption.isLeaf = true;
              }
              targetOption.loading = false;
              this.CityArray = [...this.CityArray];
            });
        }
      },
      onChangeAddress(val) {
        if (val.length === 0) {
          this.addressArr();
        }
        for (var i = 0; i < this.selectAddressArr.length; i++) {
          if (this.selectAddressArr[i].level === "province") {
            this.form.invoice.province = this.selectAddressArr[i].label;
            this.form.invoice.provinceCode = this.selectAddressArr[i].value;
          }
          if (this.selectAddressArr[i].level === "city") {
            this.form.invoice.city = this.selectAddressArr[i].label;
            this.form.invoice.cityCode = this.selectAddressArr[i].value;
          }
          if (this.selectAddressArr[i].level === "district") {
            this.form.invoice.district = this.selectAddressArr[i].label;
            this.form.invoice.districtCode = this.selectAddressArr[i].value;
          }
        }
        if (val.length === 4) {
          console.log('a4')
          this.$store
            .dispatch("unSave/getAreaListSync", {
              code: this.form.invoice.districtCode,
              level: this.form.invoice.district,
            })
            .then((data) => {
              for (var i = 0; i < data.length; i++) {
                if (data[i].value === val[3]) {
                  this.form.invoice.street = data[i].name;
                  this.form.invoice.streetCode = data[i].value;
                  this.form.invoice.optionsA = val;
                  this.$forceUpdate();
                }
              }
            });
        }
      },
      //清空开票信息地址值
      addressArr() {
        for (let key in this.form.invoice) {
          if (key === 'optionsA') {
            this.form.invoice.optionsA = [];
          }
        }
      },
      setApiAddress(result) {
        this.apiAddress.province = result.invoice.provinceCode;
        this.apiAddress.city = result.invoice.cityCode;
        this.apiAddress.district = result.invoice.districtCode;
      },
      //获取选中省市区的详情
      getadress2(result) {
        let requestData = {
          district: result.invoice.districtCode,
          city: result.invoice.cityCode,
          province: result.invoice.provinceCode,
        };
        for (let i in requestData) {
          this.apiRequest(requestData[i], i, result);
        }
      },
      apiRequest(code, type, result) {
        console.log(code, type, 'a1');
        this.$store
          .dispatch("unSave/getAreaListSync", {
            code,
            level: type
          })
          .then((res) => {
            this.apiData[type] = res
            this.apiCallBack(result);
          });
      },
      apiCallBack(result) {
        console.log(this.apiData)
        if (Object.keys(this.apiData).length === 3) {
          let districtData = this.formatOptions(this.apiData.district);
          let cityData = this.formatOptions(this.apiData.city);
          cityData = this.addChildren(
            cityData,
            this.apiAddress.district,
            districtData
          );
          let provinceData = this.formatOptions(this.apiData.province);
          provinceData = this.addChildren(
            provinceData,
            this.apiAddress.city,
            cityData
          );
          let options = this.CityArray;
          options = this.addChildren(
            options,
            this.apiAddress.province,
            provinceData
          );
          this.CityArray = [...options];
          let optionsA = [];
          optionsA.push(result.invoice.provinceCode);
          optionsA.push(result.invoice.cityCode);
          optionsA.push(result.invoice.districtCode);
          optionsA.push(result.invoice.streetCode);
          this.$set(this.form.invoice, 'optionsA', optionsA);
        }
      },
      addChildren(options, code, childrenData) {
        options.forEach((element) => {
          if (element.code === code) {
            element.children = childrenData;
          }
        });
        return options;
      },
      formatOptions(array) {
        array.map(function (value) {
          value.label = value.name;
          value.value = value.code;
          return value;
        });
        return array;
      },
      // 获取详细信息
      getDetails() {
        this.$store.dispatch('user/toFilterUserTenants').then(() => {
          this.$store.dispatch('request', this.$api.register.get2sDetail(this.currentTenant.id)).then(res => {
            let result = res.result;
            console.log(result);
            // result.invoice.optionsA =
            for (let key in result) {
              if (result[key]) {
                this.form[key] = result[key];
              }
            }
            if (result.invoice) {
              this.getadress2(result);
              this.setApiAddress(result);
              this.getadress3(result);
              this.setApiAddress1(result);
            } else {
              this.$set(this.form, 'invoice', {
                // 发票类型
                invoiceType: '1',
                // 发票抬头
                title: '',
                // 纳税人识别号
                taxRegNo: '',
                // 收件人
                accepter: '',
                // 联系电话
                acceptMobile: '',
                // 所在区域、
                area: '',
                //省
                province: "",
                //省编码
                provinceCode: "",
                //市
                city: "",
                //市编码
                cityCode: "",
                //区
                district: "",
                //区编码
                districtCode: "",
                //街道
                street: "",
                //街道编码
                streetCode: "",
                // 详细地址
                acceptAddr: ''
              })
            }
          })
        })
      },

      loadData1(selectedOptions) {
        this.selectAddressArr1 = selectedOptions;
        const targetOption = selectedOptions[selectedOptions.length - 1];
        if (targetOption.level !== "street") {
          targetOption.loading = true;
          console.log(targetOption.code, targetOption.level, 'a3')
          this.$store
            .dispatch("unSave/getAreaListSync", {
              code: targetOption.code,
              level: targetOption.level,
            })
            .then((res) => {
              let result = res;
              for (var i = 0; i < result.length; i++) {
                result[i].isLeaf = result[i].level === "street";
                result[i].label = result[i].name;
                result[i].value = result[i].code;
                delete result[i].children;
              }
              console.log(result);
              targetOption.children = result;
              if (result.length === 0) {
                targetOption.isLeaf = true;
              }
              targetOption.loading = false;
              this.CityArray1 = [...this.CityArray1];
            });
        }
      },
      onChangeAddress1(val) {
        if (val.length === 0) {
          this.addressArr1();
        }
        for (var i = 0; i < this.selectAddressArr1.length; i++) {
          if (this.selectAddressArr1[i].level === "province") {
            this.form.address.province = this.selectAddressArr1[i].label;
            this.form.address.provinceCode = this.selectAddressArr1[i].value;
          }
          if (this.selectAddressArr1[i].level === "city") {
            this.form.address.city = this.selectAddressArr1[i].label;
            this.form.address.cityCode = this.selectAddressArr1[i].value;
          }
          if (this.selectAddressArr1[i].level === "district") {
            this.form.address.district = this.selectAddressArr1[i].label;
            this.form.address.districtCode = this.selectAddressArr1[i].value;
          }
        }
        if (val.length === 4) {
          console.log('a4')
          this.$store
            .dispatch("unSave/getAreaListSync", {
              code: this.form.address.districtCode,
              level: this.form.address.district,
            })
            .then((data) => {
              for (var i = 0; i < data.length; i++) {
                if (data[i].value === val[3]) {
                  this.form.address.street = data[i].name;
                  this.form.address.streetCode = data[i].value;
                  this.form.address.optionsA = val;
                  this.$forceUpdate();
                }
              }
            });
        }
      },
      //清空开票信息地址值
      addressArr1() {
        for (let key in this.form.address) {
          if (key === 'optionsA') {
            this.form.address.optionsA = [];
          }
        }
      },
      setApiAddress1(result) {
        this.apiAddress1.province = result.address.provinceCode;
        this.apiAddress1.city = result.address.cityCode;
        this.apiAddress1.district = result.address.districtCode;
      },
      //获取选中省市区的详情
      getadress3(result) {
        let requestData = {
          district: result.address.districtCode,
          city: result.address.cityCode,
          province: result.address.provinceCode,
        };
        for (let i in requestData) {
          this.apiRequest1(requestData[i], i, result);
        }
      },
      apiRequest1(code, type, result) {
        console.log(code, type, 'a1');
        this.$store
          .dispatch("unSave/getAreaListSync", {
            code,
            level: type
          })
          .then((res) => {
            this.apiData1[type] = res
            this.apiCallBack1(result);
          });
      },
      apiCallBack1(result) {
        console.log(this.apiData1)
        if (Object.keys(this.apiData1).length === 3) {
          let districtData = this.formatOptions(this.apiData1.district);
          let cityData = this.formatOptions(this.apiData1.city);
          cityData = this.addChildren1(
            cityData,
            this.apiAddress1.district,
            districtData
          );
          let provinceData = this.formatOptions1(this.apiData1.province);
          provinceData = this.addChildren1(
            provinceData,
            this.apiAddress1.city,
            cityData
          );
          let options = this.CityArray1;
          options = this.addChildren1(
            options,
            this.apiAddress1.province,
            provinceData
          );
          this.CityArray1 = [...options];
          let optionsA = [];
          optionsA.push(result.address.provinceCode);
          optionsA.push(result.address.cityCode);
          optionsA.push(result.address.districtCode);
          optionsA.push(result.address.streetCode);
          this.$set(this.form.address, 'optionsA', optionsA);
        }
      },
      addChildren1(options, code, childrenData) {
        options.forEach((element) => {
          if (element.code === code) {
            element.children = childrenData;
          }
        });
        return options;
      },
      formatOptions1(array) {
        array.map(function (value) {
          value.label = value.name;
          value.value = value.code;
          return value;
        });
        return array;
      },

      // 点击保存离开
      saveInfo() {
        this.save2sInfo(this.form);
      },
      // 提交预览
      submitAndPreview() {

        if (!this.form.doorPicId) {
          this.$message.error('请先上传门头照片再提交预览！');
          return;
        }

        for (let item of this.form.workshopPicId) {
          if (!item) {
            this.$message.error('请先上传两张工作间照片再提交预览！');
            return;
          }
        }

        if (!this.form.businessLicensePicId) {
          this.$message.error('请先上传营业执照再提交预览！');
          return;
        }

        if (!this.form.idCardFrontPicId) {
          this.$message.error('请先上传身份证正面照片再提交预览！');
          return;
        }

        if (!this.form.idCardBackPicId) {
          this.$message.error('请先上传身份证背面照片再提交预览！');
          return;
        }

        this.$refs.ruleForm.validate(valid => {
          if (valid) {
            this.save2sInfo(this.form).then(() => {
              this.$router.push('/enter/enterView/firmApprove2sPreview');
            });
          } else {
            this.$message.error('请先填写完上方的数据再进行提交预览')
          }
        });
      },
      // 保存2s的入驻信息
      save2sInfo(data) {
        return new Promise((resolve) => {
          this.$store.dispatch('request', this.$api.register.settleSave2s(data)).then(() => {
            this.$message.success('保存成功');
            resolve();
          })
        })
      }
    },
    computed: {
      currentTenant() {
        return this.$store.state.user.currentTenant
      }
    },
    created() {
      this.getCity(this.getEnterpriseInformation);
    },
  }
</script>
<style lang="less" scoped>
  .max {
    overflow: hidden;
    padding-left: 76px;
    margin-top: 40px;

    /deep/ .ant-form-item-label > label::after {
      content: "";
    }

    /deep/ .ant-form-item-required::before {
      font-size: 12px;
      margin-right: 0;
      position: relative;
      left: -1px;
      z-index: 10;
    }

    .box11 {
      /deep/ .ant-form-item-label {
        position: relative;
        top: 3px;

        label {
          &::after {
            content: "(或工商注册号)";
            font-size: 12px;
            color: @colorGreyFontM;
            line-height: 14px;
            margin: 0;
            top: 0;
          }
        }
      }
    }

    .max_left {
      width: 904px;
      float: left;

      .maxleftbox,
      .writMessage {
        border: 1px solid @greyBorder;

        .maxleft_title {
          height: 48px;
          background-color: @greyDeepBackground;
          font-size: 16px;
          line-height: 48px;
          padding-left: 16px;
          color: @colorCommonFont;
        }

        .maxleft_title1 {
          overflow: hidden;
          padding: 24px 25px 0;

          .photos {
            // overflow: hidden;

            /deep/ .ant-upload-picture-card-wrapper {
              height: 120px;
            }

            /deep/ .ant-upload.ant-upload-select-picture-card > .ant-upload {
              padding: 0;

              img {
                max-width: 200px;
                max-height: 120px;
              }
            }

            .photos1,
            .photos2,
            .photos3,
            .photos4,
            .photos5 {
              .avatars {
                position: absolute;
                right: 0;
                top: 0;
                z-index: 2;
                transform: translate(50%, -50%);
                cursor: pointer;
              }
            }

            .photos1,
            .photos3,
            .photos4,
            .photos5 {
              position: relative;
              width: 200px;
              float: left;

              p {
                text-align: center;
                color: @colorGreyFont;
                font-size: 12px;

                i {
                  color: #cccccc;
                  font-style: normal;
                }
              }
            }

            p {
              text-align: center;
              color: @colorGreyFont;
              font-size: 12px;
            }

            .photos2 {
              float: left;
              margin: 0 20px;

              .photo2-main {
                .flex(center, space-between);
              }

              .photos2left {
                margin-right: 10px;
                position: relative;
              }

              .photos2right {
                position: relative;
              }

              p {
                text-align: center;
                color: @colorGreyFont;
                font-size: 12px;

                i {
                  color: #cccccc;
                  font-style: normal;
                }
              }
            }

            .photos1,
            .photos2,
            .photos3 {
              margin-bottom: 24px;
            }

            .photos4,
            .photos5 {
              margin-right: 20px;
            }

            .upload-image-contain {
              width: 200px;
              height: 120px;
              border: 1px solid #fff;
              margin-bottom: 6px;
              transition: border-color 0.2s;
              .flex(center, center);
              background: @greyBackground;
              cursor: pointer;

              &:hover {
                border-color: @activeRed;
              }

              .uppload-image {
                max-width: 100%;
                max-height: 100%;
              }
            }
          }
        }

        .yaoqiu {
          padding: 24px 25px 0;

          h4 {
            font-size: 14px;
            color: @colorCommonFont;
            margin-bottom: 15px;
          }

          p {
            font-size: 12px;
            color: @colorGreyFontM;
            margin-bottom: 8px;
          }

          .yaoqiuh4 {
            margin-top: 20px;

            i {
              color: #cccccc;
              font-style: normal;
            }
          }
        }
      }

      .writMessage {
        margin-top: 16px;
      }

      .checkeds {
        text-align: center;
        margin-top: 34px;
        margin-bottom: 30px;
      }

      .submit-options {
        width: 360px;
        margin: 0 auto;

        div {
          display: inline-block;
          width: 172px;
          height: 32px;
          border-radius: 4px;
          line-height: 32px;
          text-align: center;
          font-size: 14px;
          cursor: pointer;
        }

        div:nth-child(1) {
          background: @activeRed;
          margin-right: 16px;
          color: #fff;
        }

        div:nth-child(2) {
          background: @greyDeepBackground;
          color: @colorCommonFont;
        }
      }
    }

    .max_right {
      width: 172px;
      float: right;
    }

    .ant-upload.ant-upload-select-picture-card {
      width: 200px;
      height: 120px;
    }
  }
</style>
